<!--  -->
<template>
  <el-card class="tree-card">
    <!-- 用了一个行列布局 -->
    <treeTool :node-data="companyInfo" :iscompany="iscompany" />
    <hr>
    <!-- 添加树形下拉控件 -->
    <el-tree
      :data="depts"
      default-expand-all
      :props="{label:'name'}"
    >
      <!-- 这里是作用域插槽 , 由于我们传入一个数组 ,遍历都在子组件内部进行
    每个部门遍历到的数据对象, 需要element子组件回传过来
    变量名data和其中的数据,都是固定(查文档即可) -->
      <!-- <template v-slot:default='{data}'></template> -->
      <!-- <template slot="default" slot-scope="{data}" /> -->
      <template #default="{data}">
        <!-- scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据 -->
        <treeTool :node-data="data" @addDepartment="addDepartment" @updateDepartment="updateDepartment" @delCompany="addDepts" />

      </template>
    </el-tree>
    <addDepts ref="addDept" :show-dialog.sync="showDialog" :node-data="nodeData" @addDepts="addDepts" />
  </el-card>
</template>

<script>
import treeTool from './components/treeTool.vue'
import { getCompanyList } from '@/api/department'
import { listToTreeData } from '@/utils/index'
import AddDepts from './components/addDepts.vue'
export default {
  components: { treeTool, AddDepts },
  data() {
    return {
      depts: [],
      defaultProps: {
        children: 'children',
        name: 'name'
      },
      companyInfo: {
        name: '广州回头车科技有限公司',
        manager: '负责人'
      },
      iscompany: true,
      showDialog: false,
      nodeData: {}
    }
  },
  // 进入页面时先获取数据进行渲染
  async created() {
    this.addDepts()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 树形组件(子组件)传过来的事件, 子组件将点击哪个的信息传过来 ,父组件进行接收
    addDepartment(nodeData) {
      this.nodeData = nodeData
      // 将弹窗弹起
      this.showDialog = true
    },
    //  获取部门列表
    async addDepts() {
      const { depts } = await getCompanyList()
      // 调用递归方法将数据转换成树形格式
      this.depts = listToTreeData(depts, '')
    },
    // 查看子部门,子组件传递过来的事件,子组件将点击哪个的信息传过来
    updateDepartment(nodeData) {
      this.nodeData = nodeData
      // 并调用addDepts组件的方法,用this.$refs.addDept.getDepartDetail将id传入进行调用,用于数据回显
      this.$refs.addDept.getDepartDetail(nodeData.id)
      // 并将弹窗弹起
      this.showDialog = true
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
